<template>
  <div class="add-user">
    <span>用户状态:</span>
    <el-input @keydown.enter="searchHandle" class="input" v-model="searchInfo" size="large"
              placeholder="请输入用户信息"></el-input>
    <el-button type="primary" class="button" size="large" plain @click="searchHandle">搜索</el-button>
    <el-button type="primary" class="button" size="large" plain @click="addUser">添加</el-button>
  </div>
  <el-table :data="useList.list" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180"/>
    <el-table-column prop="username" label="用户名" width="200"/>
    <el-table-column label="权限" width="200">
      <template #default="scope">
        <div>{{ scope.row.permission === 'admin' ? '管理员' : '普通用户' }}</div>
      </template>
    </el-table-column>
    <el-table-column prop="phone" label="联系电话" width="200"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEditor(scope.$index,scope.row)">编辑权限</el-button>
        <el-button type="danger" size="small" @click="handleDelete(scope.$index,scope.row)">删除用户</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 添加用户 -->
  <el-dialog v-model="dialogAddVisible" center title="添加用户" width="35%">
    <el-form :model="userForm" label-width="120px" status-icon>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username" type="text"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="userForm.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="phone">
        <el-input v-model="userForm.phone" type="text"></el-input>
      </el-form-item>
      <el-form-item label="权限" prop="permission">
        <el-radio-group v-model="userForm.permission" size="large">
          <el-radio-button @click="permissionHandler('admin')" label="管理员"></el-radio-button>
          <el-radio-button @click="permissionHandler('vip')" label="普通用户"></el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogAddVisible=false">取消</el-button>
      <el-button type="primary" @click="sureAddUserHandler">确定</el-button>
    </template>
  </el-dialog>

<!-- 自改内容对话框-->
  <el-dialog v-model="dialogUpdateVisible" center title="修改用户" width="35%">
    <el-form :model="userUpdateForm" label-width="120px" status-icon>
      <el-form-item label="用户名" prop="username">
        <h3>{{userUpdateForm.username}}</h3>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="userUpdateForm.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="phone">
        <el-input v-model="userUpdateForm.phone" type="text"></el-input>
      </el-form-item>
      <el-form-item label="权限" prop="permission">
        <el-radio-group v-model="userUpdateForm.permission" size="large">
          <el-radio-button @click="permissionUpdateHandler('admin')" label="管理员"></el-radio-button>
          <el-radio-button @click="permissionUpdateHandler('vip')" label="普通用户"></el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogUpdateVisible=false">取消</el-button>
      <el-button type="primary" @click="sureUpdateUserHandler">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import api from '@/api/index.js'
import {onMounted, reactive, ref} from "vue";
import { ElMessageBox, ElMessage } from 'element-plus'
const useList = reactive({
  list: []
})
const userForm = reactive({
  username: "",
  password: "",
  phone: "",
  permission: "vip"
})
const userUpdateForm = reactive({
  username: "",
  password: "",
  phone: "",
  permission: "vip"
})
const dialogAddVisible = ref(false)
const dialogUpdateVisible = ref(false)
const searchInfo = ref("")
onMounted(() => {
  http()
})

const http = () => {
  api.getUserList().then(res => {
    if (res.status === 200) {
      useList.list = res.result
    }
  })
}
const addUser = () => {
  dialogAddVisible.value = true
}
const permissionHandler = (val) => {
  userForm.permission = val
}
const EditorId=ref(0)
const handleEditor = (index, row) => {
  EditorId.value=row.id
  if(row.id===1){
    return
  }
  dialogUpdateVisible.value=true
   api.getPreviewUser1({
     id:row.id
   }).then(res=>{
     if(res.status===200){
       userUpdateForm.username=res.result[0].username
       userUpdateForm.password=res.result[0].password
       userUpdateForm.phone=res.result[0].phone
       userUpdateForm.permission=res.result[0].permission
     }
   })
}
const sureUpdateUserHandler=()=>{
  userUpdateForm.permission==="管理员"?userUpdateForm.permission="admin":userUpdateForm.permission="vip"
   api.getUpdateUser1({
     id:EditorId.value,
     password:userUpdateForm.password,
     phone:userUpdateForm.phone,
     permission:userUpdateForm.permission
   }).then(res=>{
     if(res.status===200){
       http()
       dialogUpdateVisible.value=false
     }
   })
}
const permissionUpdateHandler=(val)=>{
  userUpdateForm.permission=val
}
const handleDelete = (index, row) => {
  ElMessageBox.confirm('是否确定删除用户','warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    api.getUserDel({
      id:row.id
    }).then(res=>{
         if(res.status===200){
           ElMessage({
             type: 'success',
             message: res.msg,
           })
           http()
         }else {
           ElMessage({
             type: 'success',
             message: res.msg,
           })
         }
    })
  }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已经取消删除',
        })
      })
}
const sureAddUserHandler = () => {
  userForm.permission==="管理员"?userForm.permission="admin":userForm.permission="vip"
  api.getUserAdd({
    username: userForm.username,
    password: userForm.password,
    phone: userForm.phone,
    permission: userForm.permission
  }).then(res => {
    if (res.status === 200) {
      dialogAddVisible.value = false
      http()
    }
  })
}
const searchHandle = () => {
  api.getUserSearch({
    search: searchInfo.value
  }).then(res => {
    useList.list = res.result
  })
}
</script>

<style lang="scss" scoped>
.add-user {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;

  span {
    font-weight: 700;
  }

  .input {
    width: 200px;
  }
}
</style>